<template>
  <div class="login-wrap">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-container">
      <el-form-item label="账号" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="check">
        <el-input type="password" v-model="ruleForm.check" autocomplete="off"></el-input>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="dosubmit('ruleForm')">注册</el-button>
        <el-button @click="userquer">返回登录</el-button>
        <el-button type="primary" @click="check('ruleForm')">获取验证码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>


import axios from "axios";
import Qs from "qs"

export default {
  name: 'login',
  data: function() {
    var checkAge = (rule, value, callback) => {
      var szReg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (!value) {
        return callback(new Error('账号不能为空'));
      }
      setTimeout(() => {
        if (value.length>=20) {
          callback(new Error('不能超过20位'));
        } else {
          if (value.length<= 6) {
            callback(new Error('不能低于6位'));
          } else {


            if (!szReg.test(value)){
              callback(new Error("账户不为邮箱"))
            }else {
              // 发送请求获取用户是否重名
              axios({
                url:`/login.do/check/${value}`,
                method:"get",
              }).then(data=>{
                console.log(data.data)
                if(data.data.code===1000){
                  callback();
                }else {
                  return callback(new Error('账号以存在'));
                }
              }).catch(()=>{
                return callback(new Error('请重试'));
              })
            }
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    // var validateCheck = (rule, value, callback) => {
    //   if (value === '' ) {
    //     callback(new Error('请输入验证码'));
    //   } else {
    //     if (value.length!==6){
    //       callback(new Error('验证码错误'));
    //     }
    //     if (this.ruleForm.checkPass !== '') {
    //       this.$refs.ruleForm.validateField('check');
    //     }
    //     callback();
    //   }
    // };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
          check:''
        },
        rules: {
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2, trigger: 'blur'}
          ],
          age: [
            {validator: checkAge, trigger: 'blur'}
          ],

        }
      }
  },
  methods: {
    // 获取验证码
    check(re){
      this.$refs[re].validate((v)=>{
        if(v && this.ruleForm.pass===this.ruleForm.checkPass){
          let params = {
            account: this.ruleForm.age
          };

          axios({
            url:"/login.do/code",
            method:"get",
            params: params
          }).then(data=>{
            if(data.data.code===1000){
              alert(data.data.msg)
              this.$message.error(data.data.msg);
            }else {
              this.$message.error(data.data.msg);
            }
          }).catch(()=>{
            this.$message.error("注册失败，数据请求失败!")
          })
        }else {
          this.$message.error("注册失败，账号密码不一致!")
        }
      })


    }
    ,
    userquer(){
      this.$router.push({
        path:"/"
          }
      )
    },
    //注册
    dosubmit: function(re) {
      // 校验信息完整度
      this.$refs[re].validate((v)=>{
        if(v && this.ruleForm.pass===this.ruleForm.checkPass){
          let params = {
            account: this.ruleForm.age,
            password: this.ruleForm.pass,
            newPass: this.ruleForm.checkPass,
            check : this.ruleForm.check
          };

          axios({
            url:"/login.do/reg",
            method:"get",
            params: params
          }).then(data=>{
            if(data.data.code===1000){
              alert(data.data.msg)
              this.$router.push({
                path:"/"
              });
            }else {
              this.$message.error(data.data.msg);
            }
          }).catch(()=>{
            this.$message.error("注册失败，数据请求失败!")
          })
        }else {
          this.$message.error("注册失败，账号密码不一致!")
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 600px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
